<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>登陆页面</title> 
	
	<link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
	<link href="css/loginCss/login.min.css" rel="stylesheet">
</head>
<body>
        <div class="bk"></div>
        <div class="box  col-lg-3 col-lg-offset-7 
         col-md-3 col-md-offset-7
         col-sm-8 col-sm-offset-2
         col-xs-10 col-xs-offset-1">
            <ul class="them">
                <li class="cur ">登录</li>
                <li>注册</li>
            </ul>
            <div class="contion">
                <div style="display:block;">
                    <div class="tip"></div>
	                    <dl>
	                        <dt>
	                            <input type="text" name="" placeholder="帐户名" class="username">
	                        </dt>
	                        <dd>
	                            <svg class="icon" aria-hidden="true">
	                              <use xlink:href="#icon-zhanghu"></use>
	                            </svg>
	                        </dd>
	                    </dl>
	                    <dl>
	                        <dt>
	                            <input type="password" name="" placeholder="密码" class="password">
	                        </dt>
	                        <dd>
	                            <svg class="icon" aria-hidden="true">
	                              <use xlink:href="#icon-mima"></use>
	                            </svg>
	                        
	                        </dd>
	                    </dl>
	                    <dl class="codeBox">
	                        <dt><input type="text" name="code" placeholder="验证码"  class="code"></dt>
	                        <dd><img id="kaptchaImage" src="Kaptcha.jpg" alt="点击更换" title="点击更换"></dd>
	                    </dl>
	                    <button class="btn btn1">登录</button>
                </div>
                <div>
                  <form action="#" id="login_form2" method="post">
                    <div class="tip"></div>
                    <dl>
                        <dt>
                            <input type="text" name="" placeholder="帐户名" class="username">
                        </dt>
                        <dd>
                            <svg class="icon" aria-hidden="true">
                              <use xlink:href="#icon-zhanghu"></use>
                            </svg>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <input type="password" name="" placeholder="密码" class="newPassword">
                        </dt>
                        <dd>
                            <svg class="icon" aria-hidden="true">
                              <use xlink:href="#icon-mima"></use>
                            </svg>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <input type="text" name="" placeholder="确认密码" class="confirmPassword">
                        </dt>
                        <dd>
                            <svg class="icon" aria-hidden="true">
                              <use xlink:href="#icon-querenmima"></use>
                            </svg>
                        </dd>
                    </dl> 
                    <dl>
                        <dt>
                            <input type="text" name="" placeholder="邮箱" class="Email">
                        </dt>
                        <dd>
                            <svg class="icon" aria-hidden="true">
                              <use xlink:href="#icon-youxiang"></use>
                            </svg>
                        </dd>
                    </dl>
                    <dl  class="codeBox">
                        <dt><input type="text" name="" placeholder="验证码"  class="code"></dt>
                        <dd><img id="kaptchaImage2" src="Kaptcha.jpg" alt="点击更换" title="点击更换"></dd>
                    </dl>
                    <button class="btn btn2">注册</button>
                   </form>
                </div>
            </div>
        </div>
</body>
<script src="js/loginJs/iconfont.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
  <script type="text/javascript">
        $(document).ready(function(){
            var times=0;
            var n=0;
               $(".bk").css("marginTop",n+"px");
               function run(){  
               
                    timer=setInterval(function(){

                        if(n<=-50){                     
                            clearInterval(timer);
                        }
                        else{
                            n--;
                            $(".bk").css("marginTop",n+"px")  
                        }  
                    },50) 
                }
                   run()
        });
        
	        //点击图片本身更换图片_登陆
	        $('#kaptchaImage').click(function() {
	            $(this).attr('src', 'Kaptcha.jpg?' + Math.floor(Math.random() * 100));
	        })
	        //点击图片本身更换图片_注册
	         $('#kaptchaImage2').click(function() {
	            $(this).attr('src', 'Kaptcha.jpg?' + Math.floor(Math.random() * 100));
	        })

	        
            function isEmail(str){ 
                var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/; 
                return reg.test(str); 
            } 
            function removeClass(who){
                    who.parent().parent().removeAttr("class","error")

            }
            function removeClass_code(who){
                    who.parent().removeAttr("class")

            }
            function addError_code(who){
                    who.parent().attr("class","error")

            }
            function addError(who){
                        who.parent().parent().attr("class","error")
                       

            }
            $(".them li").click(function () {
                $(this).attr("class","cur").siblings().removeAttr("class")
                var indexs=$(this).index()
                $(".contion>div").eq(indexs).css("display","block").siblings().css("display","none");
                $("input").val("").parent().parent().removeAttr("class","error");
                $(".code").parent().parent().attr("class","codeBox")
                $(".tip").text("");

            })
            $(".btn1").click(function(){
            	//var params = $("#login_form").serialize();
                var username=$(".contion div:nth-child(1) .username");
                var password=$(".password");
                var code=$(".contion div:nth-child(1) .code");
                // y验证账号
                if(username.val().trim()){
                    removeClass(username)
                    // y验证密码
                    if(password.val().trim()){
                        removeClass(password)
                        // y验证验证码
                        if(code.val().trim()){
                            removeClass_code(code)
                            $(".tip").text("")

                              $.ajax({
                                  type: "post",
                                  url: "${prc}/user/ajaxLogin.action",
                                  data: {
                                     username:username.val().trim(),
                                     password:password.val().trim(),
                                     code:code.val().trim()

                                 },
                                  dataType: "text",
                                  success: function(data){
                                     if(data){
                                    	 /*解析返回JSON*/
                         				var obj = eval('(' + data + ')');
                        				/*判断返回JSON是错误消息那么长度就在6到8  是成功信息那么长度是9 */
                        				if(obj.message.length < 9){
                        					/* 打印返回JSON */
                        					alert(obj.message);
                        					/* 点击刷新验证码 */
                        					$("#kaptchaImage").trigger("click");
                        				}else{
                        					/* 页面跳转  */
                        					window.location = "${prc}/index.action";
                        				}
                                     }
                                  }
                              });

                        }
                        else{
                            addError_code(code)
                            $(".tip").text("验证码不能为空")
                        }
                    }
                    else{
                        addError(password)
                        $(".tip").text("密码不能为空")
                    }
                }
                else{
                    addError(username)
                    $(".tip").text("账号不能为空")
                }

                

            })
            $(".btn2").click(function(){
                var username=$(".contion div:nth-child(2) .username");
                var newPassword=$(".newPassword");
                var confirmPassword=$(".confirmPassword");
                var Email=$(".Email");
                var code=$(".contion div:nth-child(2) .code");
                // y验证账号
                if(username.val().trim()){
                    removeClass(username)
                    // y验证新密码
                    if(newPassword.val().trim()){
                        removeClass(newPassword)
                        // y验证确认密码
                        if(confirmPassword.val().trim()){

                            // y验证确认密码、新密码
                            if(confirmPassword.val().trim()===newPassword.val().trim()){
                                removeClass_code(confirmPassword)
                                // y验证邮箱
                                if(Email.val().trim()){
                                    removeClass_code(Email)
                                    // y验证邮箱格式
                                    if(isEmail(Email.val().trim())){
                                        removeClass_code(Email)
                                        // y验证验证码
                                        if(code.val().trim()){
                                            removeClass_code(code)
                                            $(".tip").text("")
                                            // $.ajax({
                                            //      type: "GET",
                                            //      url: "",
                                            //      data: {
                                            //         username:$(".contion div:nth-child(1) .username").val(),
                                            //         content:$(".newPassword").val(),
                                            //         content:$(".confirmPassword").val(),
                                            //         content:$(".Email").val(),
                                            //         code:$(".contion div:nth-child(2) .code").val())

                                            //     },
                                            //      dataType: "json",
                                            //      success: function(data){
                                            //         console.log(data)
                                            //      }
                                            //  });

                                        }
                                        else{
                                            addError_code(code)
                                            $(".tip").text("验证不能为空")
                                        }

                                    }
                                    else{
                                        addError_code(Email)
                                        $(".tip").text("邮箱格式有误")
                                    }


                                }
                                else{
                                    addError_code(Email)
                                    $(".tip").text("邮箱不能为空")
                                }
                            }
                            else{
                                addError_code(confirmPassword)
                                $(".tip").text("两个密码不一致")
                            }


                        }
                        else{
                            addError_code(confirmPassword)
                            $(".tip").text("确认密码不能为空")
                        }
                    }
                    else{
                        addError(newPassword)
                        $(".tip").text("新密码不能为空")
                    }
                }
                else{
                    addError(username)
                    $(".tip").text("新账号不能为空")
                }


            })
    
    </script>
</html>
